<template>
  <div class="allstu">
    <el-table :data="studentInfo" border v-loading="loading">
      <el-table-column fixed="left" prop="studentName" label="姓名" width="180"></el-table-column>
      <el-table-column prop="institute" label="学院" width="200"></el-table-column>
      <el-table-column prop="major" label="专业" width="200"></el-table-column>
      <el-table-column prop="grade" label="年级" width="200"></el-table-column>
      <el-table-column prop="clazz" label="班级" width="100"></el-table-column>
      <el-table-column prop="sex" label="性别" width="120"></el-table-column>
      <el-table-column prop="tel" label="联系方式" width="120"></el-table-column>
      <el-table-column fixed="right" label="查看成绩" width="150">
        <template #default="scope">
          <el-button @click="checkGrade(scope.row.studentId)" type="primary" size="small">查看成绩</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-config-provider :locale="zhCn">
      <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageNumChange"
          :current-page="pagination.pageNum"
          :page-sizes="[3, 6, 9, 12]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
      </el-pagination>
    </el-config-provider>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import AES from "@/utils/AESUtil";
import {useRouter} from "vue-router/dist/vue-router";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
export default {
  name: "studentsGrade",
  setup(){
    const {proxy} = getCurrentInstance()
    const router = useRouter()
    // eslint-disable-next-line no-undef
    const role = ref(AES.Decrypt($cookies.get("role")))
    let studentInfo = ref([])
    let loading = ref(false) //加载标识符
    let pagination = reactive({
      pageNum: 1, //当前页
      total: Number(''), //记录条数
      pageSize: 3 //每页条数
    })
    onMounted(()=>{
      getStuInfo()
    })
    function getStuInfo(){
      loading.value = true
      if (role.value === '1'){
        proxy.$axios.get(
            // eslint-disable-next-line no-undef
            `/manage/students/${$cookies.get('id')}/${pagination.pageNum}/${pagination.pageSize}`
        ).then(
            response => {
              studentInfo.value = [...response.data.list]
              pagination.total = response.data.total
              pagination.pageNum = response.data.pageNum
              pagination.pageSize = response.data.pageSize
              loading.value = false
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }else if (role.value === '0'){
        proxy.$axios.get(
            // eslint-disable-next-line no-undef
            `/manage/students/${pagination.pageNum}/${pagination.pageSize}`
        ).then(
            response => {
              studentInfo.value = [...response.data.list]
              pagination.total = response.data.total
              pagination.pageNum = response.data.pageNum
              pagination.pageSize = response.data.pageSize
              loading.value = false
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }
    }
    function pageSizeChange(value){//改变当前记录条数
      pagination.pageSize = value
      getStuInfo()
    }
    function pageNumChange(value){//改变当前页码
      pagination.pageNum = value
      getStuInfo()
    }
    function checkGrade(id){
      router.push({ path: "/grade", query: { id: id } })
    }
    return{
      studentInfo,
      pagination,
      loading,
      pageSizeChange,
      pageNumChange,
      checkGrade,
      zhCn
    }
  }
}
</script>

<style scoped>
.allstu{
  padding: 0px 40px;
}
</style>